<template>
    <el-row class="ad-container">
        <el-col :span="24" class="header">
            <h3>BlogAdmin</h3>
        </el-col>
        <el-col :span="24" class="main">
            <aside>
                <el-menu default-active="1" @select="toggleView" :router="true">
                    <el-menu-item index="home">
                        <i class="fa fa-home"></i>{{pageTags.home}}
                    </el-menu-item>
                    <el-menu-item index="user">
                        <i class="fa fa-user"></i>{{pageTags.user}}
                    </el-menu-item>
                    <el-menu-item index="article">
                        <i class="fa fa-file"></i>{{pageTags.article}}
                    </el-menu-item>
                    <el-menu-item index="comment">
                        <i class="fa fa-comment"></i>{{pageTags.comment}}
                    </el-menu-item>
                </el-menu>
            </aside>
            <section class="content-container">
                <el-col :span="24" class="breadcrumb-container">
                    <el-breadcrumb separator="/" class="breadcrumb-inner">
                        <el-breadcrumb-item>后台管理</el-breadcrumb-item>
                        <el-breadcrumb-item>{{pageTag}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
                <el-col :span="24" class="content-wrapper">
                    <transition>
                        <router-view></router-view>
                    </transition>
                </el-col>
            </section>
        </el-col>
    </el-row>
</template>
<script>
    export default {
        data: function () {
            return {
                pageTags: {
                    home:'后台首页',
                    user:'用户信息',
                    article:'文章管理',
                    comment:'评论管理'
                },
                pageTag: '首页面板'
            }
        },
        methods: {
            toggleView(index) {
                this.pageTag=this.pageTags[index];
            }
        }
    }

</script>
<style lang="scss">
    .ad-container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        .header {
            height: 60px;
            line-height: 60px;
            color: #fff;
            background-color: #1D8CE0;
            h3 {
                margin-left: 15px;
            }
        }
        .main {
            position: absolute;
            top: 60px;
            bottom: 0;
            overflow: hidden;
            aside {
                width: 200px;
                background: #eef1f6;
                border-right: 1px solid #aaa;
                height: 100%;
                .fa {
                    margin-right: 10px;
                }
            }
            .content-container {
                position: absolute;
                right: 0px;
                top: 0px;
                bottom: 0px;
                left: 200px;
                overflow-y: scroll;
                padding: 15px;
                .breadcrumb-container {
                    padding-bottom: 20px;
                    margin-bottom:10px;
                    .breadcrumb-inner {
                        float: left;
                    }
                    border-bottom: 1px solid #aaa;
                }
                .content-wrapper {
                    box-sizing: border-box;
                }
            }
        }
    }
</style>